<template>
  <div>readonly && shallowReadonly</div>
  <h1> {{ state2 }} </h1>
  <button @click="update"> 更新</button>
</template>

<script lang="ts">
import {defineComponent, reactive, readonly, shallowReadonly} from 'vue';

export default defineComponent({
  name: 'App',
  components: {},
  setup() {
    const state = reactive({
      name: 'm1',
      car: {
        name: 'm1Car'
      }
    })
    // const state2 =readonly(state)    //只读
    const state2 = shallowReadonly(state)   //浅只读
    const update = () => {
      state2.car.name += '####'
    }
    return {
      state2, update
    }
  }
});
</script>

<style>

</style>
